// 尚硅谷最新版Webpack5实战教程(从入门到精通) https://www.bilibili.com/video/BV1e7411j7T5
const {resolve} = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    mode: 'development', // prodection 生产模式
    entry: './src/index.js',
    output: {
        filename: "build.js",
        path: resolve(__dirname, 'build'),
    },
    // 启动命令 npx webpack serve
    devServer: {//https://blog.csdn.net/peter_hzq/article/details/109683913
        contentBase: resolve(__dirname, 'build'),
        compress: true, // 启动gzip 压缩
        port: 3000,
        open: true, // 自动打开本地浏览器
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ]
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,//限制打包图片的大小：
                        //如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
                        name: 'images/[name]-[hash:8].[ext]',//images:图片打包的文件夹；
                        //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
                        //[hash:8]：一个项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前八位作为图片名，可以避免重名。
                        // outputPath: "assets",
                        esModule: false
                    },
                }],
                type: 'javascript/auto', //https://blog.csdn.net/w184167377/article/details/118930758
            },
            {
                test: /\.html$/,// 负责html中<img>的 url-loader中esModule为false
                use: [{
                    loader: 'html-loader',
                }],
            },
            // 引入的字体没能成功
            // {
            //     test: /\.(woff|woff2|eot|ttf|otf)$/,
            //     use: [
            //         'file-loader',
            //     ],
            //     type: 'javascript/auto', //https://blog.csdn.net/w184167377/article/details/118930758
            // },
        ]
    },
    plugins: [
        // 默认会创建空的HTML,自动引入打包输出的资源
        new htmlWebpackPlugin({
            template: './index.html' // 复制并自动引入打包输出的资源
        })
    ]

}
